<template>
    
  <div class="body">
    <div class="banner">
      <img src="../../assets/img/share/x.png" class="imgone" alt="" />
      <img src="../../assets/img/share/yuan.png" class="imgtwo" alt="" />
      <span class="spanone"
        >打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div id="wekupButton" class="btn" @click="Gonext">立即下载</div>
    </div>
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="show">
      <img src="../../assets/img/wei_20210307160153.png" alt="" />
    </div>
  </div>
</template>

<script>
import bridge from "../../js/js1";
import { getSystem, openApp, getUrlQuery, parseKeyValue } from "../../js/js";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      show: false,
      system: getSystem(),
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.showe();
    // if (this.system.android) {
    //   // openApp({
    //   //   path: 'https://download.yuanfuda933.com/h5/new-year.htm'
    //   // })
    //   ULink([{
    //     id: 'usr1anivh5aa8uq6', // 后台生成的裂变活动LinkID
    //     data: {
    //       path: 'webview',
    //       webUrl: 'https://download.yuanfuda933.com/h5/other2.html#/sale',// 活动地址
    //       andUrl: 'https://download.yuanfuda933.com/h5/other2.html#/sale'// 活动地址
    //       // extraData: `{id:${this.id},uid:${this.uid}`,
    //       // extraData: {
    //       //   id: this.id,
    //       //   uid: this.uid,
    //       //   tid: this.tid
    //       // }
    //     }, /* 自定义参数，选填 */
    //     selector: '#wekupButton',
    //     useOpenInBrowerTips: 'default',
    //     proxyOpenDownload: function (defaultAction, LinkInstance) {
    //       window.location.href = LinkInstance.solution.downloadUrl
    //     }
    //   }])
    // }
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    showe() {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
    },
    Gonext() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        this.href("yfd://yfdmall:8080/splash");
        setTimeout(function () {
          window.location.href =
            "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk";
        }, 3000);
      }
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
  },
};
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  height: 21.653333rem;
  background: url("../../assets/img/share/header.png") no-repeat;
  background-size: contain;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .rigth {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 10rem;
    height: 30rem;
    background-color: #1e1e1e;
    opacity: 0.8;
  }
  .rigth img {
    width: 8rem;
    height: 4.4rem;
    float: right;
  }
  .banner {
    width: 10rem;
    height: 2.28rem;
    background: #000000;
    display: flex;
    .imgone {
      display: block;
      margin: auto 0.293333rem;
      width: 0.586667rem;
      height: 0.586667rem;
    }
    .imgtwo {
      display: block;
      margin: auto 0.266667rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    .spanone {
      margin: auto 0.266667rem;
      width: 3.2rem;
      height: 1.453333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      .spantwo {
        font-size: 0.32rem;
        font-size: #9b9b9b;
        color: #9b9b9b;
      }
    }
    .btn {
      width: 2.933333rem;
      height: 0.906667rem;
      background: #ea0462;
      border-radius: 0.133333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.906667rem;
      margin: auto 0;
    }
  }
}
</style>
